<template>
  <div class="goodsedit">
    <!-- 商品编辑、新增 -->
    <el-dialog
      :title="text"
      :visible.sync="goodsEdit"
      width="50%">
      <el-form :model="form" ref="form" size="medium" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品编号:" prop="goods_no">
              <el-input v-model="form.goods_no" placeholder="商品编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品名称:" prop="goods">
              <el-input v-model="form.goods" placeholder="商品名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品类别:" prop="goods_type">
              <el-select v-model="form.goods_type" filterable clearable placeholder="商品类别" style="width: 100%;">
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格型号:" prop="model">
              <el-select v-model="form.model" filterable clearable placeholder="规格型号" style="width: 100%;">
                <el-option
                  v-for="item in modelList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位:" prop="unit">
              <el-input v-model="form.unit" placeholder="单位"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品单价(元):" prop="goods_price">
              <el-input v-model="form.goods_price" placeholder="商品单价(元)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'GoodsEdit',
    props:{
      rows:{}
    },
    data() {
      return {
        text: '',
        goodsEdit: false, //门店对话框
        form: {
          goods_no: '',
          goods: '',
          goods_type: '',
          model: '',
          unit: '',
          goods_price: ''
        },
        typeList: [
          {value: '0',label: '浆果'},
          {value: '1',label: '柑橘属'}
        ],
        modelList: [
          {value: '0',label: '1.5kg'},
          {value: '1',label: '2.5kg'}
        ]
      }
    },
    created() {

    },
    methods:{
      //打开对话框
      openEdit() {
        this.text = "编辑商品"
        this.goodsEdit = true;
        this.form = {
         goods_no: this.rows.goods_no,
         goods: this.rows.goods,
         goods_type: this.rows.goods_type,
         model: this.rows.model,
         unit: this.rows.unit,
         goods_price: this.rows.goods_price
        }
      },

      openAdd() {
        this.text = "新增商品"
        this.goodsEdit = true;
      },

      close(){
        this.goodsEdit = false;
        this.form = {
          goods_no: '',
          goods: '',
          goods_type: '',
          model: '',
          unit: '',
          goods_price: ''
        }
      },

      //保存
      save () {
        this.$refs['form'].validate(valid => {
          if (valid) {
            console.log('form',this.form)
            this.goodsEdit = false;
            this.form = {
              goods_no: '',
              goods: '',
              goods_type: '',
              model: '',
              unit: '',
              goods_price: ''
            }
            this.$message.success('保存成功')
          } else {
            this.$message.error('表单验证失败!')
          }
        })
      }

    }
  }
</script>

<style>
</style>
